<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入类库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>

		<!-- 视图 -->
		
		
			
			<div id="app">
				<h3>三国群英传 v1</h3>
				
				
				<p v-for="(item,index) in arr1"> {{index}} .   {{item}}</p>
				
				<hr>
				
				
				<h3>三国群英传 v2</h3>
				<p v-for="(item,index) in arr2"> {{index}} .   {{item.name}}  籍贯： {{item.address}}</p>
				
				
				<hr>
				<h3>三国群英传 v3</h3>
				<p v-for="item in arr2" >   {{item.name}}  籍贯： {{item.address}}</p>
				
				
				<hr>
				<h3>三国群英传 v4</h3>
				<p v-for=" (value , key ,i ) in zf">   {{i}}.  {{key}} :{{ value }}  </p>
				
				
				
				<hr>
				<h3>三国群英传 v5 避免组件复用    key必须是 String Number</h3>
				<p v-for="item in arr2" :key="item.id">   {{item.name}}  籍贯： {{item.address}}</p>
				<!-- <p v-for="item in arr2" :key="this">   {{item.name}}  籍贯： {{item.address}}</p> -->
			</div>



		<!-- 把 vuejs管理的数据跟 视图进行双向绑定-->
		<script>
			let vm = new Vue({
				el: "#app",
				data: {
					arr1: ["张飞","关羽","刘备"],
					arr2: [
							{id:1, name:'张飞', address:'河北'},
							{id:2 , name:'张飞', address:'黑龙江'},
							{id:3, name:'刘备', address:'荆州'},
					],
					zf:{
						name:'张飞',
						age: 55,
						fav:'战争',
						address:'河北'
					}
			
				}
			})
		</script>



	</body>
</html>
